import 'ol/ol.css'
import * as control from 'ol/control'
import { Map, View } from 'ol/index'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ } from 'ol/source'
import { WindLayer } from 'ol-wind'

function initMap() {
  const map = new Map({
    target: 'eguid-map',
    controls: control.defaults({ attribution: false, zoom: true, rotate: true }),
    view: new View({
      center: [119, 32],
      maxZoom: 21,
      zoom: 3,
      minZoom: 1,
      projection: 'EPSG:4326'
    })
  })
  // 添加高德地图图层
  const xyzLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    }),
    projection: 'EPSG:3857'
  })
  map.addLayer(xyzLayer)

  fetch('https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json').then(res => res.json()).then((res) => {
    const windLayer = new WindLayer(res, {
      forceRender: false,
      windOptions: {
        globalAlpha: 0.95, // 粒子透明度，默认0.9
        velocityScale: 1 / 25, // 粒子运动速度系数，数值越大越快
        paths: 5000,
        colorScale: [// 粒子颜色设置
          'rgb(36,104, 180)',
          'rgb(60,157, 194)',
          'rgb(128,205,193 )',
          'rgb(151,218,168 )',
          'rgb(198,231,181)',
          'rgb(238,247,217)',
          'rgb(255,238,159)',
          'rgb(252,217,125)',
          'rgb(255,182,100)',
          'rgb(252,150,75)',
          'rgb(250,112,52)',
          'rgb(245,64,32)',
          'rgb(237,45,28)',
          'rgb(220,24,32)',
          'rgb(180,0,35)'
        ],
        lineWidth: 2, // 粒子路径宽度
        width: 3,
        generateParticleOption: false
      },
      wrapX: true,
      projection: 'EPSG:4326'
    })

    console.log(map, windLayer)

    map.addLayer(windLayer)
  })
}

